<template>
	<view class="page">
		<view class="header">
			<view class="logo">
				<image src="../../static/login/car.png" />
			</view>
		</view>

		<view class="login">
			<view class="title"><text>绑定手机号</text></view>

			<template v-if="type === 0">
				<view class="block">
					<view class="icon">
						<image src="/static/login/mobile.png" />
					</view>
					<view class="input">
						<input v-model="form_username" placeholder="请输入用户名或手机号" type="text" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/lock.png" />
					</view>
					<view class="input">
						<input v-model="form_password" placeholder="请输入密码" type="safe-password" />
					</view>
				</view>
			</template>

			<template v-if="type === 1">
				<view class="block">
					<view class="icon">
						<image src="/static/login/mobile.png" />
					</view>
					<view class="input">
						<input v-model="form_tel" type="tel" maxlength="11" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="/static/login/lock.png" />
					</view>
					<view class="input">
						<input v-model="form_code" placeholder="请输入验证码" type="number" />
					</view>
					<view class="send-button" @click="sendCode()">
						<text v-if="!send_count_down">发送验证码</text>
						<text v-else>重新发送 {{send_count_down}} S</text>
					</view>
				</view>
			</template>

			<view class="change-type">
				<text v-if="type === 0" @click="changeType()">短信验证码登录</text>
				<!-- <text v-else @click="changeType()">用户名密码登录</text> -->
			</view>

			<view class="button" @click="login()"><text>绑定</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, // 0 用户密码登录  1 验证码登录
				form_username: '',
				form_password: '',
				form_tel: '',
				form_code: '',
				send_count_down: 0, // 验证码重新发送等待倒计时
				openid :''
			}
		},
		onLoad() {
			let openid = uni.getStorageSync('openid')
			if(openid == ''){
				uni.request({
					url:'https://car.ydk1.cn/wechat/login',
					method:'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							if(res.data.url!=''){
								window.location.replace(res.data.url)
							}
						} else {
							uni.showToast({
								title: '登录失败',
								icon: 'none'
							});
						}
					}
				})
			}
		},
		methods: {
			changeType() {
				this.type = this.type ? 0 : 1
			},
			sendCode() {
				if (this.send_count_down === 0) {
					// 判断手机号是否为空
					if (this.form_tel == '') {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return false;
					}
					// 请求发送验证码接口
					uni.request({
						url:'https://car.ydk1.cn/index/sendSms',
						method:'POST',
						data: {
							mobile: this.form_tel
						},
						success: (res) => {
							if (res.statusCode === 200) {
								if(res.data.msg!=''){
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							} else {
								uni.showToast({
									title: '发送失败',
									icon: 'none'
								});
							}
						}
					})
					// 验证手机号规则 调用发送验证码接口
					let countDown = 60
					this.send_count_down = countDown
					let timer = setInterval(() => {
						countDown--
						this.send_count_down = countDown
						if (countDown === 0) {
							clearInterval(timer)
						}
					}, 1000)
				}
			},
			login() {
				if (this.type === 0) {
					// 用户密码登录
					console.log(this.form_username, this.form_password)
				} else {
					if(this.form_tel == '' || this.form_code==''){
						uni.showToast({
							title: '请输入手机号或验证码',
							icon: 'none'
						});
						return false;
					}
					uni.request({
						url:'https://car.ydk1.cn/index/bindingMobile',
						method:'POST',
						data: {
							mobile: this.form_tel,
							code: this.form_code,
							openid : uni.getStorageSync('openid')
						},
						success: (res) => {
							if (res.statusCode === 200) {
								uni.navigateTo({
									url: '/pages/goods-detail/goods-detail?id='+uni.getStorageSync('productId')
								})
							} else {
								uni.showToast({
									title: '绑定失败',
									icon: 'none'
								});
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>